﻿<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>跟进</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<style>
    .bg-gray {
        background-color: #F0EFF5;
    }

    .gray {
        color: #96959A;
    }

    .bg-yellow {
        background-color: #ff8427;
    }

    .sellect-class {
        width: 324px;
        height: 22px;
        border: 0px;
        color: gray;
    }

    .follow-up {
        width: 70%;
        height: 40px;
        line-height: 40px;
        float: left;
        margin-left: 2%;
    }

    .follow {
        width: 100%;
        height: 40px;
        line-height: 40px;
        float: left;
        border-bottom: solid 1px #F0EFF5;
        background-color: #ffffff;
    }
    .follow1 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        float: left;
        border-bottom: solid 1px #F0EFF5;
        background-color: #ffffff;
    }

    .w15 {
        width: 15px;
    }

    .fr {
        float: right;
        margin-right: 2%;
    }

    .yellow {
        color: #ff8427;
    }

    .pr {
        position: relative;
    }

    .pa {
        position: absolute;
        left: 90%;
        top: 0;
    }

    .input {
        width: 200px;
        height: 30px;
        padding-left: 5px;
    }
</style>

<body class="bg-gray">
    <div id="dialog" style="display:none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd" style="padding-bottom:10px;">
                <strong class="weui-dialog__title">新建标签</strong>
            </div>
            <div class="weui-dialog__bd">
                <input type="text" class="lh30 tagname" />
            </div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="closeDialog()">取消</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="addTag()">确定</a>
            </div>
        </div>
    </div>
    <a class="weui-cell weui-cell_access bg-white" href="javascript:;">
        <div class="weui-cell__bd">
            <div class="show-follow-list">
                <div style="width:100%;height:100%;" class="follow-up yellow">选择跟进常用语</div>
                <div style="margin-bottom:-63px;position:relative;top:-33px;display:none;" class="fr">
                    <img src="../images/boss-label/222.png" class="w15">
                </div>
            </div>
            <div class="follow_list"  style="display:none;">
                <div id="pre-follow" class="follow tc">
                    <div>客户查看了公司产品，有合作意向</div>
                </div>
                <div  class="follow tc">
                    <div>标记一下，客户有合作意向</div>
                </div>
                <div class="follow tc">
                    <div>客户多次查看小程序，合作意向强烈</div>
                </div>
                <div class="follow tc">
                    <div>计划近期安排拜访</div>
                </div>
                <div class="follow tc">
                    <div>见面聊过，客户有合作意向</div>
                </div>
                <div class="follow tc">
                    <div>曾拜访过的客户</div>
                </div>
                <div class="follow tc">
                    <div>标记一下，需给客户发送报价</div>
                </div>
                <div class="follow tc">
                    <div>已发报价，待客户反馈</div>
                </div>
                <div class="follow tc">
                    <div>已成交客户，维护好后续关系</div>
                </div>
                <div class="follow1 tc">
                    <div onclick="addBook()">
                        自定义常用语
                    </div>
                </div>
            </div>
            <!--<select class="sellect-class f14 yellow" style="color:#f5be7e;background-color:white;" id="numbers">
                <option value="1" selected>请选择跟进常用语</option>
                <option value="1">标记一下，客户用合作意向</option>
                <option value="2">计划近期安排拜访</option>
            </select>-->
        </div>
        

        <div class="weui-cell__ft">
        </div>
    </a>
    <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <div class="f14 gray">跟进描述</div>
        </div>
    </div>
    <div class="weui-cells weui-cells_form" style="margin-top: 0;">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea f14 yahei" id="content" onkeyup="onkey()" placeholder="在这里输入跟进语" rows="3"></textarea>
                <div class="weui-textarea-counter f14">
                    <span id="rightcount">0</span>/40
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area f18 white mt35">
        <a class="weui-btn bg-yellow" href="javascript:" id="showTooltips">提交</a>
    </div>
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/base.js"></script>
    <script src="../js/client.js"></script>
    <script>
        var staffId = getQueryString("staffId");
        var textname;
        $(function () {
            loadfollow();
            $('.show-follow-list').click(function () {
                if ($('.follow_list').css('display') == 'none') {
                    $('.follow_list').css('display', 'block')
                } else {
                    $('.follow_list').css('display', 'none')
                }
                if ($('.fr').css('display') == 'none') {
                    $('.fr').css('display', 'block');
                    $('.weui-cell__ft').css('display','none');
                } else {
                    $('.fr').css('display', 'none');
                    $('.weui-cell__ft').css('display', 'block');
                }
            })
            //获取单个常用语
            $('.follow').click(function () {
                textname = $(this).children().eq(0).text();
                if (textname == "") {
                    var values = $('.yahei').val();
                    $('.yahei').val(values);
                } else {
                    $('#rightcount').text(textname.length);
                    $('.yahei').val(textname);
                }
            });
            $('#showTooltips').click(function () {
                AddClientFollow();
                return false;
            })
        })

        //加载自定义语
        function loadfollow() {
            var html = "";
            ajaxGet(siteApiList.GetFollowTip + "?staffId=" + staffId, function (data) {
                console.log(data);
                if (!isJsonSuccess(data))
                    return;
                var list = data.Data;
                for (var i = 0; i < list.length; i++) {
                    html += "<div data=" + list[i].Id + " class='follow tc pr'><div>" + list[i].Value + "</div><div class='pa'><img src='../images/boss-label/333.png' class='w30'></div></div>";
                }
                $('.pr').remove();
                $('#pre-follow').before(html);
                loadBtn();
            });
        }
        function loadBtn() {
            $('.pa').click(function () {
                var id = $(this).parent().attr('data');
                ajaxPost(siteApiList.DeleteFollowTip, "id="+id, function (data) {
                    if (!isJsonSuccess(data))
                        return;
                    loadfollow();
                    Alert("删除成功");
                });
            })
            $('.follow').click(function () {
                textname = $(this).children().eq(0).text();
                if (textname == "") {
                    var values = $('.yahei').val();
                    $('.yahei').val(values);
                } else {
                    $('#rightcount').text(textname.length);
                    $('.yahei').val(textname);
                }
            });
        }

        //添加自定义语
        function addTag() {
            var followName = $(".tagname").val();
            if (trim(followName) == "") {
                closeDialog();
                Alert("请填写自定义话语");
                return;
            }
            ajaxPost(siteApiList.AddFollowTip, "staffId=" + staffId + "&content=" + followName, function (data) {
                closeDialog();
                loadfollow();
                Alert("新增成功");
                if (!isJsonSuccess(data))
                    return;
            });
        }
        function closeDialog() {
            $('#dialog').css('display', 'none');
        }
        function addBook() {
            $('#dialog').css('display', 'block');
        }
        function onkey() {
            var sign = $('#content').val();
            $('#rightcount').text(sign.length);
            if (sign.length > 40) {
                Alert("字数超过范围。");
            }
        }
    </script>
</body>

</html>